import router from '../../router/index';
<template>
    <el-container>
        <el-aside :width="width+'px'">
            <el-menu :default-active="$route.path"
             :ellipsis="true"
             background-color="#2b303b"
              text-color="#fff"
              router
              :collapse="isCollapse"
              collapse-transition
              >
                <div class="desc">XXX学校</div>
                <div class="collapse" @click="changewidth">|||</div>
                <el-menu-item index="home" :class="{active:$route.path=='/home'}">
                    <el-icon>
                        <HomeFilled />
                    </el-icon>
                    <span>首页</span>
                </el-menu-item>
                  <el-sub-menu :index="item.path" v-for="(item,i) in rolestore.rolelist" :key="i">
                    <template #title>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>{{item.title}}</span>
                    </template>
                    <el-menu-item-group>
                         <el-menu-item :index="sitem.path" v-for="(sitem,i) in item.children" :key="i">{{sitem.title}}</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>
                <h4>学校管理系统</h4>
                <div class="user">
                    <span>{{userstore.userinfo.name}}</span>
                    <el-icon class="icon">
                        <User />
                    </el-icon>
                    <el-dropdown>

                        <el-icon class="el-icon--right"><arrow-down /></el-icon>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="goback">退出</el-dropdown-item>
                                <el-dropdown-item>XXX</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <el-main>
                <RouterView></RouterView>
            </el-main>
        </el-container>
    </el-container>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
// @ts-ignore
import {Userstore} from '@/stores/user.js'
import router from '@/router';
// @ts-ignore
import { roleStore } from '@/stores/role.js';
const userstore = Userstore()
const rolestore = roleStore()
const isCollapse = ref(false)
const width = ref(200)
const changewidth = ()=>{
    isCollapse.value = !isCollapse.value
    width.value=isCollapse.value?64:200
}
const goback =()=>{
    userstore.deluser()
  router.replace('/login')
}
</script>
<style lang="scss">
.el-container {
    width: 100%;
    height: 100vh;
.el-aside {
    height: 100vh;
    background-color: #2b303b;
    transition: 0.5s;
    .el-menu {
        border: 0;
        .collapse {
            text-align: center; width: 100%;
        }
         .collapse:hover {
            cursor: pointer;
        }
.el-menu-item:hover {
        background-color: #006eff;
    }

    .el-sub-menu__title:hover {
        background-color: #006eff;
    }
    }
    
}
.active {
    color: #006eff;
}
.el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    .user {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .icon {
            background-color: aqua;
            border-radius: 40%;
            margin-left: 10px;
        }
    }

}

.el-main {
    padding: 10px 10px;
    margin: 0 20px;
}
}

</style>